<template>
  <div>
    <div class="author-header">
      <div class="author-bg">
        <mt-header title="" class="bg_t">
          <router-link to="/" slot="left">
            <mt-button icon="back"></mt-button>
          </router-link>
          <mt-button icon="more" slot="right"></mt-button>
        </mt-header>
      </div>
      <div class="author-con">
        <div class="user">
          <img src="../assets/icon/user.jpg" alt="" />
        </div>
        <div class="content">
          <div class="author-con-item">
            <p>1</p>
            <span>关注</span>
          </div>
          <div class="author-con-item">
            <p>15745</p>
            <span>读者</span>
          </div>
          <div class="author-con-item">
            <p>183.8万字</p>
            <span>字数</span>
          </div>
        </div>
      </div>
      <!-- 其他作品 -->
      <div class="items">
        <h3 class="title no">
            其他作品
        </h3>
        <div>
          <cross-itme />
          <cross-itme />
        </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import CrossItme from "@/components/CrossItme.vue";
export default {
  components: { CrossItme },
};
</script>

<style lang="scss" scoped>
.author-bg {
  width: 100%;
  height: 40vw;
  background: url("../assets/author_bg.jpg") no-repeat right;
  background-size: cover;
}
.author-con {
  display: flex;
  justify-content: space-between;
  margin-top: -1rem;
  padding: 0 0.9rem;
  .user {
    width: 26vw;
    height: 26vw;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0 0.06rem rgb(207 207 207 / 50%);
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .content {
    display: flex;
    justify-content: space-between;
    width: 60vw;
    margin: 0 auto;
    align-items: center;
    text-align: center;
    span {
      color: #8f8f9e;
      font-size: 0.8rem;
    }
  }
}

</style>